<template>
  <div class="signDetail" ref="homePage">
    <v-search></v-search>
    <div class="out-slide">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img width="100%" :src="image" />
        </van-swipe-item>
      </van-swipe>
      <p class="txt">苏州隐居酒店苏州拙政园店</p>
    </div>
    <div class="box1">
      <div class="left">
        <p>游客须知</p>
        <p style="color: #8d8d8d; font-size: 0.75rem;">景点简介</p>
        <van-icon style="position: absolute;right: 0.9375rem;top: 0;line-height: 3rem;" size="18px" color="#8d8d8d"
          name="arrow" />
      </div>
      <div class="right">
        <p>开放时间</p>
        <p style="font-size: 0.75rem;color: #8d8d8d;">00:00~00:00</p>
      </div>
    </div>
    <div class="box1 box2">
      <p class="address">
        <van-icon color="#46d0ca" style="margin-right: 0.3125rem;" size="15px" name="location-o" />
        <span>苏州市姑苏区坝上巷20号</span>
      </p>
      <van-icon size="18px" color="#8d8d8d" name="arrow" />
    </div>
    <div>
      <div class="all">
        <div class="img-box">
          <img style="height: 4.8125rem;" src="https://resource.sz-trip.com/uploads/20190321/964b4e07f4021b0d92258ba5289a380e.png" />
        </div>
        <div class="txt-box">
          <p class="title">苏州隐居酒店苏州拙政园店</p>
          <div style="display: flex;margin-top: 0.3125rem;">
            <van-tag style="margin-right: 0.25rem;" color="#46d0ca" plain>酒店</van-tag>
            <van-tag color="#46d0ca" plain>隐居</van-tag>
          </div>
          <div class="tip2">预订须知 ></div>
        </div>
        <div class="price-btn">
          <p class="price">
            ￥<span>8888</span>起
          </p>
          <van-button @click="Jumpbuy()" color="#46d0ca" round type="default" size="mini">立即预约</van-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import search from '../search.vue'
  export default {
    components: {
      "v-search": search,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度
        images: [
          'https://resource.sz-trip.com/uploads/20190325/964b4e07f4021b0d92258ba5289a380e.png',
          'https://resource.sz-trip.com/uploads/20190325/964b4e07f4021b0d92258ba5289a380e.png',

        ]
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods:{
      Jumpbuy() {
        this.$router.push({
          path: "/Home/productDetail",

        })
      },
    }
  }
</script>

<style lang="scss">
  .signDetail {
    .van-swipe{
    .van-swipe__indicators{
      .van-swipe__indicator--active{
        background-color: #46d0ca;
      }
    }
    }
    .out-slide {
      position: relative;

      .txt {
        position: absolute;
        bottom: 0;
        padding: 10px;
        color: white;
      }
    }

    .box1 {
      height: 3rem;
      background: #FFFFFF;
      padding: 0.375rem 0.9375rem;
      border-bottom: 0.0625rem solid #eee;
      display: flex;
      justify-content: space-between;

      .left {
        border-right: 0.0625rem solid #eee;
        color: #212121;
        font-size: 0.875rem;
        position: relative;
        width: 50%;
        justify-content: space-between;
        flex-direction: column;
      }

      .right {
        width: 50%;
        display: flex;
        flex-direction: column;

        p {
          margin-left: 0.9375rem;
          color: #212121;
          font-size: 0.875rem;
        }
      }
    }

    .box2 {
      display: flex;
      align-items: center;

      .address {
        color: #626262;
        font-size: 0.75rem;
        display: flex;
        // align-items: center;
      }
    }

    .all {
      padding: 0.9375rem 0.625rem;
      background: #FFFFFF;
      display: flex;
      position: relative;

      .img-box {
        width: 7.875rem;
        height: 4.8125rem;
        overflow: hidden;
        display: block;
      }

      .txt-box {
        margin-left: 0.5rem;
        width: 13.125rem;

        .title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #605f69;
          font-size: 0.875rem;
          // line-height: 0.625rem;
        }
        .tip2{
          font-size: 0.625rem;
          color: #8a8a8a;
          margin-top: 0.3125rem;
        }
      }
      .price-btn{
        position: absolute;
        bottom: 0.9375rem;
        right: 0.625rem;
        display: flex;
        flex-direction: column;
        p{
          color: #f75a61;
          font-size: 0.875rem;
          text-align: center;
        }
      }
    }
  }
</style>
